<!--
 * @Description: 
 * @Date: 2022-08-26 11:17:11
 * @LastEditTime: 2022-08-26 11:54:35
 * @FilePath: /demo_important/src/views/UtilsBand/index.vue
 * @Author: softbank126010077018.bbtec.net
-->
<template>
  <div>
    <body>
      <div class="box"></div>
      <div class="box item2"></div>
      <div>{{ media }}</div>
      <div>{{ media }}</div>
    </body>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      media: 0,
      timer: null,
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    const s = document.querySelector('.box').computedStyleMap().get('--step');
    console.log(s);
    // CSSUnparsedValue {0: " 0", length: 1}
    // let media = 49999;
    this.progressiveIncrease(this.media, 49999);
    // this.progressiveIncrease(this.media, 22299);
    // for (var i = 0; i < media; i++) {
    //   this.timer = setInterval(() => {
    //     if (media < 1) {
    //       clearInterval(this.timer);
    //       this.timer = null;
    //     } else {
    //       media--;
    //       this.media++;
    //     }
    //   }, 5);
    // }
  },
  methods: {
    progressiveIncrease(start, end) {
      for (var i = 0; i < end; i++) {
        this.timer = setInterval(() => {
          if (end < 1) {
            clearInterval(this.timer);
            this.timer = null;
          } else {
            end--;
            this.media++;
          }
        }, 5);
      }
    },
  },
};
</script>

<style scoped>
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
}
.box {
  width: 200px;
  height: 200px;
  border: 10px solid #000;
  background-color: rebeccapurple;
  margin: auto;
  font-size: 100px;
  color: rgb(255, 255, 255);
  text-align: center;
  line-height: 200px;
  position: relative;
  --step: 0;
  counter-reset: count var(--step);
  z-index: var(--step);
  transition: --step 10s;
}
.box::before {
  content: counter(count);
}
.box.item2::before {
  content: counter(count, cjk-heavenly-stem);
}
.box:hover {
  --step: 100;
}
@property --step {
  syntax: '<integer>';
  inherits: true;
  initial-value: 0;
}
</style>
